<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';
import { mixColor } from '@sa/color';
import { BarChart, HeadphonesIcon, Shield, Zap } from 'lucide-vue-next';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { loginModuleRecord } from '@/constants/app';
import PwdLogin from './modules/pwd-login.vue';
import Register from './modules/register.vue';

interface Props {
  /** The login module */
  module?: UnionKey.LoginModule;
}

const props = defineProps<Props>();

const appStore = useAppStore();
const themeStore = useThemeStore();

interface LoginModule {
  label: string;
  component: Component;
}

const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
  'pwd-login': { label: loginModuleRecord['pwd-login'], component: PwdLogin },
  register: { label: loginModuleRecord.register, component: Register }
};

const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);

const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';

  const ratio = themeStore.darkMode ? 0.5 : 0.2;

  return mixColor(COLOR_WHITE, themeStore.themeColor, ratio);
});

const features = computed(() => [
  {
    icon: BarChart,
    title: $t('page.login.feature.dataAnalysis'),
    description: $t('page.login.feature.dataAnalysisDesc')
  },
  {
    icon: Zap,
    title: $t('page.login.feature.realTimeCollaboration'),
    description: $t('page.login.feature.realTimeCollaborationDesc')
  },
  {
    icon: Shield,
    title: $t('page.login.feature.strongSecurity'),
    description: $t('page.login.feature.strongSecurityDesc')
  },
  {
    icon: HeadphonesIcon,
    title: $t('page.login.feature.customerSupport'),
    description: $t('page.login.feature.customerSupportDesc')
  }
]);
</script>

<template>
  <div class="size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
    <div class="relative min-h-screen w-full flex flex-col from-blue-50 to-blue-100 bg-gradient-to-br lg:flex-row">
      <!-- Left side content -->
      <div class="w-full flex flex-col items-center justify-center p-4 lg:w-[70%] lg:p-12">
        <!-- 小屏下隐藏 -->
        <div class="hidden max-w-2xl lg:mr-36 lg:block">
          <h1 class="mb-4 text-2xl text-gray-900 font-bold lg:mb-6 lg:text-4xl">
            {{ $t('page.login.feature.title') }}
          </h1>
          <p class="mb-8 text-lg text-gray-700 leading-relaxed lg:mb-12 lg:text-xl">
            {{ $t('page.login.feature.subtitle') }}
          </p>
          <!-- 特性网格布局 -->
          <div class="grid-cols-1 hidden gap-6 lg:grid md:grid-cols-2 lg:gap-8">
            <div v-for="feature in features" :key="feature.title" class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="rounded-full bg-blue-100 p-2 lg:p-3">
                  <component :is="feature.icon" class="h-5 w-5 text-blue-600 lg:h-6 lg:w-6" />
                </div>
              </div>
              <div>
                <h3 class="mb-1 text-base text-gray-900 font-semibold lg:text-lg">
                  {{ feature.title }}
                </h3>
                <p class="text-sm text-gray-600 lg:text-base">
                  {{ feature.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 登录组件容器 -->
      <div
        class="absolute left-1/2 top-1/2 z-20 w-[90%] px-4 lg:left-[70%] lg:w-460px -translate-x-1/2 -translate-y-1/2 lg:px-0"
      >
        <!-- 小屏显示 ThemeSchemaSwitch LangSwitch -->
        <div class="mb-4 flex justify-end lg:hidden">
          <div class="flex-y-center space-x-2">
            <ThemeSchemaSwitch
              :theme-schema="themeStore.themeScheme"
              :show-tooltip="false"
              class="text-18px lg:text-20px"
              @switch="themeStore.toggleThemeScheme"
            />
            <LangSwitch
              :lang="appStore.locale"
              :lang-options="appStore.localeOptions"
              :show-tooltip="false"
              @change-lang="appStore.changeLocale"
            />
          </div>
        </div>
        <Transition :name="themeStore.page.animateMode" mode="out-in">
          <component :is="activeModule.component" />
        </Transition>
      </div>

      <!-- Right side content -->
      <div
        class="hidden w-full flex-col justify-between from-[#2368F0] to-[#64A6F0] bg-gradient-to-br p-4 lg:w-[30%] lg:flex"
      >
        <div class="flex justify-end">
          <div class="flex-y-center space-x-2">
            <ThemeSchemaSwitch
              :theme-schema="themeStore.themeScheme"
              :show-tooltip="false"
              class="text-18px lg:text-20px"
              @switch="themeStore.toggleThemeScheme"
            />
            <LangSwitch
              :lang="appStore.locale"
              :lang-options="appStore.localeOptions"
              :show-tooltip="false"
              @change-lang="appStore.changeLocale"
            />
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
